<template>
</template>
<script>
export default {
    data() {
        return {
            // 表头
            classColumns: [
                {
                    title: '序号',
                    slot: 'index',
                    align: 'left',
                    width: 70,
                    align: 'center'
                },
                {
                    title: '班次名称',
                    key: 'className',
                    align: 'center',
                    slot: 'className'
                },
                {
                    title: '班次',
                    key: 'class',
                    align: 'center'
                },
                {
                    title: '开始时间',
                    key: 'beginTime',
                    align: 'center'
                },
                {
                    title: '结束时间',
                    key: 'endTime',
                    align: 'center'
                },
                {
                    title: '详情操作',
                    slot: 'detailAction',
                    key: 'detailAction',
                    align: 'center'
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 180,
                    slot: 'action',
                    align: 'center',
                    renderHeader: (h, { column }) => {
                        let _that = this;
                        return h('div', [
                            h('span', column.title),
                            h('Icon', {
                                // 绑定值
                                props: {
                                    type: 'md-add',
                                },
                                class: [
                                    'ml-5-px text-lg font-medium',
                                ],
                                // 图标样式
                                style: {
                                    color: '#3d71fa',
                                    cursor: "pointer",
                                },
                                // 绑定点击事件
                                on: {
                                    click: _that.addTableInfo,
                                }
                            })
                        ])
                    }
                },
            ],
            // 表数据
            classData: [
                {
                    className: '春季班次',
                    class: '早班',
                    beginTime: '2024-10-01',
                    endTime: '2024-10-30'
                },
                {
                    className: '夏季班次',
                    class: '早班',
                    beginTime: '2024-10-01',
                    endTime: '2024-10-30'
                },
                {
                    className: '夏季班次',
                    class: '中班',
                    beginTime: '2024-10-01',
                    endTime: '2024-10-30'
                },
                {
                    className: '冬季班次',
                    class: '早班',
                    beginTime: '2024-10-01',
                    endTime: '2024-10-30'
                },
                {
                    className: '秋季班次',
                    class: '早班',
                    beginTime: '2024-10-01',
                    endTime: '2024-10-30'
                },
                {
                    className: '秋季班次',
                    class: '中班',
                    beginTime: '2024-10-01',
                    endTime: '2024-10-30'
                },
                {
                    className: '秋季班次',
                    class: '晚班',
                    beginTime: '2024-10-01',
                    endTime: '2024-10-30'
                },
            ],
            // 编辑数据
            editingRowIndex: -1,
            editedRow: {},
            value2: null,
        }
    },
    methods: {
        // 组件合并列表数据
        handleSpan({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0 || columnIndex === 1) {
                const rowspan = this.mergeData(row, rowIndex);
                if (rowspan >= 1) {
                    return {
                        rowspan,
                        colspan: 1,
                    }
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0,
                    }
                }
            }
        },
        // 合并数据的处理逻辑
        mergeData(row, rowIndex) {
            let rowspan = 1;
            const currClassName = row.className;
            // 若当前不是第一行,则先查看前一行,若前一行的className值与当前行相同,则将当前单元格与前一行进行合并;
            if (rowIndex > 0) {
                const previousRow = this.classData[rowIndex - 1];
                const previousClassName = previousRow.className;
                if (currClassName === previousClassName) return 0;
            }
            // 再向后查看,若后面行的className值与当前行的相同,则每找到一行时rowspan加1,直到找到与当前行的值不同的行为止。
            for (let i = rowIndex + 1; i < this.classData.length; i++) {
                const nextRow = this.classData[i];
                const nextClassName = nextRow.className;
                if (currClassName === nextClassName) {
                    rowspan++;
                } else {
                    break;
                }
            }
            return rowspan;
        },
        // 主行新增数据
        addTableInfo() {
            let defaultData =
            {
                className: '夏季班次',
                class: '早班1',
                beginTime: '2024-11-06',
                endTime: '2024-12-12',
            }
        },
        // 子行新增数据
        addColInfo(row, index) {

        },
        // 子行编辑数据
        subEdit(row, index) {
            this.editingRowIndex = index;
            this.editedRow = Object.assign({}, row);
            console.log(">>>", editedRow);
        },
        // 子行删除数据
        subDelete(row, index) {

        },
        // 主行查看
        show(index) {
            this.$Modal.info({
                title: '班次信息',
                content: `Name：${this.classData[index].className}<br>Age：${this.classData[index].class}<br>Address：${this.classData[index].beginTime}`
            })
        },
        // 主行删除
        remove(index) {
            this.classData.splice(index, 1);
        }
    }
}
</script>